<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="5" :sm="5" :md="5" :lg="6" :xl="6"><div>&nbsp;</div></el-col>
      <el-col :xs="14" :sm="14" :md="14" :lg="12" :xl="12">
        <div id="viewer" v-loading.fullscreen.lock="loading">
          <el-button
            size="small"
            round
            icon="el-icon-back"
            style="float: left"
            @click="goBack"
            plain
            type="success"
            >返回</el-button
          >
         
          <el-button
            size="small"
            round
            style="float: right"
            @click="goEdit"
            plain
            type="primary"
            >修改&nbsp;<i class="el-icon-right"></i
          ></el-button>
           <el-button
            size="small"
            type="warning"
            round
            icon="el-icon-download"
            style="float: right"
            @click="download"
            plain
            >下载</el-button>
          <br />
          <el-divider
            ><font
              style="color: #34bd0078; font-weight: 600; font-size: 18px"
              >{{ title }}</font
            ></el-divider
          >

          <el-row type="flex" justify="start">
            <div>
              <el-tag
                v-if="labels.length === 0"
                style="float: left"
                size="mini"
                type="info"
                >无标签</el-tag
              >
              <el-tag
                v-for="(item, index) in labels"
                :key="index"
                style="float: left; margin-right: 2px"
                size="mini"
                >{{ item }}</el-tag
              >
            </div>
          </el-row>
          <mavon-editor
            v-model="content"
            defaultOpen="preview"
            style="margin-top: 5px"
            :subfield="false"
            :toolbarsFlag="false"
            :editable="false"
            :shortCut="false"
            toolbarsBackground="#d8efe452"
            boxShadowStyle="#0000008c 2px 2px 12px 0px"
            previewBackground="#cce9e24d"
            :externalLink="externalLink"
          />
        </div>
      </el-col>
      <el-col :xs="5" :sm="5" :md="5" :lg="6" :xl="6"><div>&nbsp;</div></el-col>
    </el-row>
  </div>
</template>

<script>
import "mavon-editor/dist/css/index.css";
import axios from "@/util/AxiosUtil.js";
import apis from "@/util/ApiUrls";
import { URLS } from "@/router";

export default {
  name: "NoteViewerComponent",
  created() {
    this.id = this.$route.params.id;
    this.loading = true;
    axios
      .get(apis.api_article.note + "/?id=" + this.id)
      .then((res) => {
        const data = res.data;
        this.title = data.title;
        this.content = data.markdown;
        this.categoryName = data.categoryName;
        this.labels = data.labels;
      })
      .catch((e) => {
        this.$notify({
          title: "警告:获取笔记数据失败",
          message: e.msg,
          type: "warning",
          duration: 1300,
        });
      })
      .finally(() => {
        this.loading = false;
      });
  },
  methods: {
    goBack() {
      this.$router.push({
        path: URLS.home,
        name: URLS.homeName,
      });
    },
    download() {
      // 下载
      this.loading = true;
      axios.post(apis.api_article.downloadInView + "/" + this.id, undefined, {responseType: 'blob'}).then(() => {
        this.$message({
          message: '下载完成',
          type: 'success'
        });
      }).catch((e) => {
        this.$message({
          message: '下载失败',
          type: 'warning'
        });
      }).finally(() => {
        this.loading = false;
      });
    },
    goEdit() {
      // 进入编辑界面
      this.$confirm("将会进入编辑界面, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push({
            path: URLS.edit,
            name: URLS.editName,
            params: {
              id: this.id,
            },
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  data() {
    return {
      id: "",
      labels: [],
      categoryName: "",
      title: "",
      content: "",
      loading: false,
      externalLink: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return process.env.VUE_APP_PUBLIC_PATH + "static/md/github-markdown.min.css";  // 部署时需要把这里的路径添加前缀/notebook-web-app/  根据环境自动切换
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return process.env.VUE_APP_PUBLIC_PATH + "static/md/highlight.min.js";
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return process.env.VUE_APP_PUBLIC_PATH + "static/md/katex.min.css";
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return process.env.VUE_APP_PUBLIC_PATH + "static/md/katex.min.js";
        },
      },
    };
  },
};
</script>
<style>
#viewer {
  background-color: #ffffffab;
  padding: 5px 20px 12px 20px;
}

#viewer .v-note-wrapper {
  height: calc(100vh - 115px);
  z-index: 10 !important;
  border-radius: 15px !important;
  border: 2px solid #d0ede8 !important;
}

#viewer .v-note-panel {
  border-radius: 15px !important;
}

#viewer .el-divider__text {
  border-radius: 8px;
}

#viewer .v-note-show .v-show-content {
  font-size: 17px;
  font-family: Menlo, "Ubuntu Mono", Consolas, "Courier New", "Microsoft Yahei",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
}
</style>
